<template>
  <div class="page">
    <div class="pageContainer">
      <!--订单基本信息栏-->
      <div class="basicOrderInformation">
        <!--1/4栏-->
        <div class="orderIndex">
          <!--第一行-->
          <div class="orderIndexList">
            <span style="width: 100px;">订单编号：</span>
            <span>{{orderDetail.orderNo}}
              <el-button type="primary" size="mini" round>修改</el-button>
            </span>
          </div>
          <!--第二行-->
          <div class="orderIndexList">
            <span>销售商家：</span>
            <span>{{orderDetail.merchantName}}</span>
          </div>
          <!--第三行-->
          <div class="orderIndexList">
            <span>订单来源：</span>
            <span>{{orderResourse}}</span>
          </div>
          <!--第四行-->
          <div class="orderIndexList">
            <span>外部订单编号：</span>
            <span>{{externalOrderNumber}}</span>
          </div>
          <!--第五行-->
          <div class="orderIndexList">
            <span>收货人身份证号：</span>
            <span>{{consigneeIDNumber}}</span>
          </div>
          <!--第六行-->
          <div class="orderIndexList">
            <span>手机：</span>
            <span>{{orderDetail.receiverPhone}}</span>
          </div>
          <!--第七行-->
          <div class="orderIndexList">
            <span>客户类型：</span>
            <span>{{customerType}}</span>
          </div>
          <!--第八行-->
          <div class="orderIndexList">
            <span>第三方支付流水号：</span>
            <span>{{orderDetail.serialNo}}</span>
          </div>
        </div>

        <!--2/4栏-->
        <div class="orderIndex">
          <!--第一行-->
          <div class="orderIndexList">
            <span>父单号：</span>
            <span>{{orderDetail.parentOrderNo}}</span>
          </div>
          <!--第二行-->
          <div class="orderIndexList">
            <span>销售店铺名称：</span>
            <span>{{orderDetail.storeName}}</span>
          </div>
          <!--第三行-->
          <div class="orderIndexList">
            <span>预计发货日期：</span>
            <span>{{expectedDeliveryDate}}</span>
            &nbsp;&nbsp;&nbsp;&nbsp;
            <!--<el-button round size="mini">修改</el-button>-->
          </div>
          <!--第四行-->
          <div class="orderIndexList">
            <span>订单异常状态：</span>
            <span>{{orderAbnormalStatus}}</span>
          </div>
          <!--第五行-->
          <div class="orderIndexList">
            <span>配送方式：</span>
            <span>{{deliveryWays}}</span>
          </div>
          <!--第六行-->
          <div class="orderIndexList">
            <span>&nbsp;</span>
            <span>&nbsp;</span>
          </div>
          <!--第七行-->
          <div class="orderIndexList">
            <span>客户名称：</span>
            <span>{{orderDetail.buyerUsername}}</span>
          </div>
        </div>

        <!--3/4栏-->
        <div class="orderIndex">
          <!--第一行-->
          <div class="orderIndexList">
            <span>订单类型：</span>
            <span>普通</span>
          </div>
          <!--第二行-->
          <div class="orderIndexList">
            <span>来源终端：</span>
            <span>{{sourceTerminal}}</span>
          </div>
          <!--第三行-->
          <div class="orderIndexList">
            <span>下单时间：</span>
            <span>{{orderDetail.buyTime}}</span>
          </div>
          <!--第四行-->
          <div class="orderIndexList">
            <span>支付状态：</span>
            <span>{{payStatus}}</span>
          </div>
          <!--第五行-->
          <div class="orderIndexList">
            <span>收货人姓名：</span>
            <span>{{orderDetail.receiverName}}</span>
          </div>
          <!--第六行-->
          <div class="orderIndexList">
            <span>&nbsp;</span>
            <span>&nbsp;</span>
          </div>
          <!--第七行-->
          <div class="orderIndexList">
            <span>订单序号：</span>
            <span>{{orderDetail.id}}</span>
          </div>
        </div>

        <!--4/4栏-->
        <div class="orderIndex">
          <!--第一行-->
          <div class="orderIndexList">
            <span>订单状态：</span>
            <span v-if="orderDetail.orderStatus =='1'">待支付</span>
            <span v-if="orderDetail.orderStatus =='2'">已支付</span>
            <span v-if="orderDetail.orderStatus =='3'">待发货</span>
            <span v-if="orderDetail.orderStatus =='4'">已发货</span>
            <span v-if="orderDetail.orderStatus =='5'">确认收货</span>
            <span v-if="orderDetail.orderStatus =='6'">待评价</span>
            <span v-if="orderDetail.orderStatus =='7'">已关闭</span>
            <span v-if="orderDetail.orderStatus =='8'">付款处理中</span>
          </div>
          <!--第二行-->
          <div class="orderIndexList">
            <span>销售渠道：</span>
            <span v-if="orderDetail.saleChannel =='1'">BBC</span>
            <span v-if="orderDetail.saleChannel =='2'">天猫</span>
            <span v-if="orderDetail.saleChannel =='3'">京东</span>
          </div>
          <!--第三行-->
          <div class="orderIndexList">
            <span>下单会员账号：</span>
            <span>{{orderDetail.buyerId}}</span>
          </div>
          <!--第四行-->
          <div class="orderIndexList">
            <span>&nbsp;</span>
            <span>&nbsp;</span>
          </div>
          <!--第五行-->
          <div class="orderIndexList">
            <span>收货人地址：</span>
            <span>{{orderDetail.receiverProvinceName}}-{{orderDetail.receiverCityName}}-{{orderDetail.receiverRegionName}} {{orderDetail.receiverAddress}}</span>
          </div>
          <!--第六行-->
          <div class="orderIndexList">
            <span>&nbsp;</span>
            <span>&nbsp;</span>
          </div>
          <!--第七行-->
          <div class="orderIndexList">
            <span>供应商：</span>
            <span>{{supplier}}</span>
          </div>
        </div>
      </div>

      <!--订单详细信息栏-->
      <el-row class="orderDetails">
        <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
          <el-tab-pane name="productInfo" label="商品明细">
                <!--商品信息-->
                <el-table :data="productDetailsData"
                          ref="multipleTable"
                          :size="size"
                          style="width: 100%"
                          align="center"
                          header-align="center"
                          :header-cell-style="{ 'color': '#FFF','background-color': '#2F4554'}"
                          @selection-change="handleSelectionChangeProduct"
                          stripe>
                  <el-table-column type="selection" width="55"></el-table-column>
                  <el-table-column type="index" label="行号" width="50"></el-table-column>
                  <el-table-column prop="goodsName" label="商品名称" width="120"></el-table-column>
                  <el-table-column prop="productCode" label="商品编码" width="150"></el-table-column>
                  <el-table-column prop="packageNumber" label="套餐编号" width="80"></el-table-column>
                  <el-table-column prop="packageName" label="套餐名" width="80"></el-table-column>
                  <el-table-column prop="specificationAttribute1" label="规格属性" width="80"></el-table-column>
                  <el-table-column prop="goodsNumber" label="货号" width="80"></el-table-column>
                  <el-table-column prop="productBarCode" label="产品条码" width="80"></el-table-column>
                  <el-table-column prop="orderingUnit" label="订购单位" width="80">
                    <template slot-scope="scope">
                      <span>件</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="orderQuantity" label="订购数量" width="80">
                    <template slot-scope="scope">
                      <span>1</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="quantityShipped" label="已发货数量" width="120"></el-table-column>
                  <el-table-column prop="deliveryWarehouse" label="发货仓库" width="120"></el-table-column>
                  <el-table-column prop="discountForMerchandiseMembers" label="商品会员折扣" width="120"></el-table-column>
                  <el-table-column prop="salesUnitPrice" label="销售单价" width="120"></el-table-column>
                  <el-table-column prop="purchaseUnitPrice" label="购买单价" width="120"></el-table-column>
                  <el-table-column prop="purchaseAmount" label="购买金额" width="120"></el-table-column>
                  <el-table-column prop="preferentialAmountOfPriceChange" label="改价优惠金额" width="120"></el-table-column>
                  <el-table-column prop="alreadyTransferDeliverNum" label="已转交货单数量" width="120"></el-table-column>
                  <el-table-column prop="waitTransferDeliverNum" label="待转交货单数量" width="120"></el-table-column>
                  <el-table-column prop="saleUnitPrice" label="销售单价" width="120"></el-table-column>
                  <el-table-column prop="discountUnitPrice" label="优惠单价" width="120"></el-table-column>
                  <el-table-column prop="buyUnitPrice" label="购买单价" width="120"></el-table-column>
                  <el-table-column prop="expressUnitFee" label="物流平摊单价" width="120"></el-table-column>
                  <el-table-column prop="actualPayTotalAmount" label="实付总金额" width="120"></el-table-column>
                  <el-table-column prop="goodsNum" label="商品数量" width="120"></el-table-column>
                  <el-table-column prop="Remarks" label="辅料备注" width="120"></el-table-column>
                  <el-table-column prop="rowState" label="行状态" width="120"></el-table-column>
                </el-table>
                <el-row style="margin:10px 0px">
                  <el-col :span="8" :offset="16">
                    <el-pagination
                      layout="total, prev, pager, next, jumper,sizes"
                      @current-change="handleCurrentChangeProductInfo"
                      :current-page="orderGoodsData.start"
                      :page-size="orderGoodsData.limit"
                      :total="orderGoodsDataTatol"
                      style="float:right;"
                      :page-sizes="[10, 20, 30, 40]"
                      @size-change="handleSizeChangeProductInfo"
                    ></el-pagination>
                  </el-col>
                </el-row>
          </el-tab-pane>

          <el-tab-pane name="deliveryInfo" label="包裹信息">
            <OrderDetailLogistics :order-no="orderNo"></OrderDetailLogistics>
          </el-tab-pane>

        </el-tabs>
      </el-row>
    </div>
  </div>
</template>

<script>
  import OrderDetailLogistics from './OrderDetailLogistics'
  export default {
    components:{
      OrderDetailLogistics
    },
    data() {
      return {
        size: 'small',
        orderNo:this.$route.params.deliverNo,
        activeName: 'productInfo',
        orderDetail: {

        },
        orderProcessLogQueryFind: {
          'start': 1,
          'limit': 10,
          'orderNo': '',
          'startTime': '',
          'endTime': '',
          'operatorName': '',
        },
        orderClosedInfoQueryData: {},
        markQueryData: {
          'userMark': '',
          'merchantMark': '',
          'deptMark': ''
        },
        orderInvoiceInfo: {
          invoiceReceiverName: '',
          invoiceReceiverPhone: '',
          invoiceReceiverAddress: '',
          invoiceWay: '',
          invoiceType: '',
          invoiceTitle: '',
          invoiceTaxId: '',
          registerAddress: '',
          registerPhone: '',
          openAccountBank: '',
          bankNo: '',
          invoiceContent: '',
          invoiceStatus: '',
          invoiceNo: '',
        },                      // 发票信息
        orderGoodsDataTatol: 0,
        orderGoodsData: {
          'orderNo': '',
          'limit': 10,
          'start': 1
        },                                  // 商品明细
        productDetailsData: [],                                              // 商品明细列表
        productCode: '',
        orderResourse: '普通',
        externalOrderNumber: '',
        consigneeIDNumber: '',
        phone: '15211112345',
        customerType: '',
        expectedDeliveryDate: '2020-03-10',
        orderAbnormalStatus: '',
        deliveryWays: '快递物流',
        sourceTerminal: 'H5',
        payStatus: '已支付',
        supplier: '自营供应商',
        discountAmountOfCommodityCoupons: '-0.00',
        preferentialAmountOfCommodityDiscountCode: '-0.00',
        preferentialAmountOfCommodityPriceChange: '0.00',
        originalAmountOfFreight: '',
        apportionmentAmountOfPromotionalBenefitsForSuppliers: '0.00',
        discountApportionmentOfSupplierCoupons: '0.00',
        totalAmountOfPreferentialApportionmentOfSuppliers: '0.00',
        amountPayable: '311.40',
        amountPaid: '312.00',
        tableData2: [
          {
            payWays: '现金支付',
            payAccount: '311.40',
            payTime: '2020-01-16 23:06:51',
            payLogsCode: '200116359293279855'
          }
        ],
        tableData3: [],//包裹列表数据
        afterSaleData: [],                                                          // 售后信息
        afterSaleTotal: 0,
        afterSaleFind: {
          'start': 1,
          'limit': 10,
          'orderNo': '',
        },
        invoiceProductInfo: [],                                                      // 发票信息- 商品信息
        orderProcessLogData: [],
        orderProcessLogTotal: 0,
        ruleForm: {
          date1: {
            date1: '',
            date2: ''
          },
          operator: ''
        },
      }
    },

    mounted() {
      this.orderNo = this.$route.params.deliverNo
      this.getOrderDetail()
      this.queryOrderGoodsQuery()
    },

    methods: {
      // 订单商品明细分页
      queryOrderGoodsQuery() {
        let this_ = this
        this_.orderGoodsData.orderNo = this_.orderNo
        this_.utils.request.queryOrderGoodsQuery(this_.orderGoodsData, function (res) {
          if (res.code == '0000') {
            this_.productDetailsData = res.data.rows
            this_.orderGoodsDataTatol = res.data.total
          }
        })
      },


      //  tab点击切换
      handleClick() {
        if (this.activeName == 'productInfo') {
          this.queryOrderGoodsQuery()
        }else if(this.activeName=="deliveryInfo"){
          let param={}
          param.orderNo=this.orderNo
        }
      },

      // 订单详情
      getOrderDetail() {
        let this_ = this
        this_.utils.request.getOrderDetail({orderNo: this_.orderNo}, function (res) {
          if (res.code == '0000') {
            if(res.data!=null){
              this_.orderDetail = res.data
            }

          }
        })
      },



      // 商品明细复选框值
      handleSelectionChangeProduct(val) {
        this.multipleSelection = val
      },

      // 商品明细分页
      handleSizeChangeProductInfo(val) {
        this.orderGoodsData.start = 1
        this.orderGoodsData.limit = val
        this.queryOrderGoodsQuery()
      },

      handleCurrentChangeProductInfo(val) {
        this.orderGoodsData.start = val
        this.queryOrderGoodsQuery()
      },

      // 售后信息分页
      handleSizeChangeAfterSale(val) {
        this.afterSaleFind.start = 1
        this.afterSaleFind.limit = val
        this.orderAfterSaleApplyQueryPage()
      },

      handleCurrentChangeAfterSale(val) {
        this.afterSaleFind.start = val
        this.orderAfterSaleApplyQueryPage()
      },

      // 操作日志分页
      handleSizeChangeOperationInfo(val) {
        this.orderProcessLogQueryFind.start = 1
        this.orderProcessLogQueryFind.limit = val
        this.orderProcessLogQuery()
      },

      handleCurrentChangeOperationInfo(val) {
        this.orderProcessLogQueryFind.start = val
        this.orderProcessLogQuery()
      },
    },
  }
</script>

<style lang="scss" scoped>
  .page {
    .pageContainer {
      background-color: #f0f3f4; //#f0f3f4

      .basicOrderInformation {
        margin-bottom: 20px;
        border: 1px solid #ccc;
        background-color: #fff;
        padding-bottom: 10px;
        font-size: 16px;
        overflow: hidden;

        .orderIndex {
          float: left
        }

        .orderIndexList {
          text-align: left;
          margin-bottom: 10px;
          padding-left: 90px
        }
      }

      .orderDetails {
        border: 1px solid #ccc;
        background-color: #fff;

        .settlementDetails {
          text-align: left;
          margin-bottom: 10px;
          padding-left: 90px
        }

      }
    }
  }
</style>
